<template>
  <!-- 51客服系统 -->
  <div class="customer">
    <!-- WhatsApp拓客系统 -->
    <banner-view :bdata="bannerData"></banner-view>

    <!-- 51客服系统能做什么 -->
    <div class="layitem_warp_whie">
      <h4>51客服系统能做什么</h4>
    </div>

    <layitem :rtdata="xitongitem"></layitem>
    <layitemleft :lfdata="followers"></layitemleft>
    <layitem :rtdata="xitongGit"></layitem>
    <youshi :youshiap="appyoushi"></youshi>
    <caseview></caseview>
    <pssea></pssea>

    <!-- 轮播新闻 -->
    <news-list :ldata="newslist"></news-list>
  </div>
</template>

<script>
import layitem from "@/components/layitem";
import layitemleft from "@/components/layitemleft";
import youshi from "@/components/youshi"; //WhatsApp客服系统的优势
import caseview from "@/components/case";
import pssea from "@/components/pssea"; //51出海转为跨境流量服务
import bannerView from "@/components/bannerview";
import newsList from "@/components/newslist";

export default {
  name: "customer",
  components: {
    layitem,
    layitemleft,
    youshi,
    caseview,
    pssea,
    bannerView,
    newsList,
  },
  data() {
    return {
      bannerData: {
        bgimg: {
          backgroundRepeat: "no-repeat",
          paddingBottom: "18%",
          overflow: "hidden",
          backgroundSize: "100% auto",
          backgroundImage:
            "url(" +
            require("@/assets/Productpage_51/top_page_51system_bg.png") +
            ")",
        },
        bannertxt: {
          title: "51客服系统",
          param:
            "可进行多国语言即时翻译、加粉计数、快捷回复的多功能出海客服辅助系统，兼容WhatsApp、LINE、Zalo等海外社交聊天工具",
        },
      },
      xitongitem: {
        title: "实时多国语言翻译",
        imgurl: require("@/assets/Productpage_51/real_time_mulity_language_translate_img.png"),
        list: [
          {
            icon: require("@/assets/Productpage_51/icon_big_brand_translate_service.png"),
            name: "大品牌翻译服务",
            content: "对接谷歌、百度、有道等翻译服务，可一键切换服务商",
          },
          {
            icon: require("@/assets/Productpage_51/icon_global_language_translate.png"),
            name: "全球语言翻译",
            content: "全球200+任意语言随意切换，无障碍对接海外业务",
          },
          {
            icon: require("@/assets/Productpage_51/icon_real_time_translate_clock.png"),
            name: "实时翻译转换",
            content: "摆脱复制粘贴式翻译，输入即可识别翻译，提高对接客户效率",
          },
        ],
      },
      xitongGit: {
        title: "高效快捷回复",
        imgurl: require("@/assets/Productpage_51/hi-effect_quke_chat_reply_redtextbox_img.png"),
        list: [
          {
            icon: require("@/assets/Productpage_51/icon_preset_quick_words.png"),
            name: "预设快捷话术",
            content: "常用话术、Q&A可一键点击发送，提高客服效率",
          },
          {
            icon: require("@/assets/Productpage_51/icon_tag_union_words.png"),
            name: "标签化统一管理话术",
            content:
              "所有快捷话术可设置不同标签，根据不容客服阶段选择相应标签快速找到目标话术",
          },
          {
            icon: require("@/assets/Productpage_51/icon_automatic_reply.png"),
            name: "自动回复",
            content:
              "好友通过自动回复，添加客服秒对接，把握引流私域的最初黄金时段引导客户成交",
          },
        ],
      },
      followers: {
        title: "会话涨粉计数",
        imgbigurl: require("@/assets/Productpage_51/dialog_chat_fans_grow_img.png"),
        list: [
          {
            imgurl: require("@/assets/Productpage_51/icon_hi_precise_fans_grow_count.png"),
            name: "高精确涨粉计数",
            content: "实时涨粉计数、会话情况计数",
          },
          {
            imgurl: require("@/assets/Productpage_51/icon_multy_worksheet_promo_plan.png"),
            name: "多工单推广方案",
            content: "支持多工单管理，掌握每一个渠道推广方案引流效果",
          },
          {
            imgurl: require("@/assets/Productpage_51/icon_multy_port_task_parallel.png"),
            name: "多端口任务并行",
            content: "支持多账号端口执行涨粉工单，分散引流账号，提高账号安全性",
          },
        ],
      },
      appyoushi: {
        title: "51客服系统的优势",
        list: [
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/whatsApp_puzzle_limg.png"),
            name: "WhatsApp底层协议",
            content:
              "专业技术团队whatsapp技术底层开发，同步更新官方版本，系统稳定性高",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/global_target_user_get_img.png"),
            name: "全球精准客户资源获取",
            content:
              "生成任意地区号码，筛选活跃开通账号，消息群发最终转化精准客户资源",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/marketing_chain_support_img.png"),
            name: "营销全链路技术支持",
            content:
              "获取数据、转化客户资源、群发推广短信、营销客户服务全程技术支持",
          },
          {
            imgurl: require("@/assets/Product_page_whatsapp_desktop/lowcost_promotion_channel_img.png"),
            name: "更低成本的推广渠道",
            content:
              "对比Facebook、Google等渠道投放或电商平台的内部投放，可以更有效压缩获客成本",
          },
        ],
      },
      //轮播新闻
      newslist: {
        theme: "出海资讯",
        list: [
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确试用翻译软件，以下技巧请查阅后使用",
            date: "51客服系统,未分类 | 2021年11月23日",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择目标语言就可以完成全球语言的实时...",
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.customer /deep/ .banner_grid_item_btn_left{
  display: none;
}
.customer /deep/ .banner_grid_item_div > p{
  width: 343px;
}
.customer /deep/ .banner_grid_item_div_btn{
  margin-top: 80px;
}
/* WhatsApp拓客系统优势 */
.layitem_warp_whie {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 40px;
}

.layitem_warp_whie > h4 {
  font-size: 38px;
  color: #1d2845;
  text-align: center;
}

/* WhatsApp拓客系统 */
.tydisplay {
  display: flex;
}

.whatsapp_item_btn_right,
.whatsapp_item_btn_left {
  width: 190px;
  height: 35px;
  line-height: 35px;
  background: #077af1;
  color: #fff;
  font-size: 16px;
  text-align: center;
  outline: 1px solid #077af1;
  border-radius: 4px;
}

.whatsapp_item_btn_left {
  background: #fff;
  color: #077af1;
}
</style>
